<template>
	<view class="container">
		<view class="list-item"  v-for="(coupon, index) in myCoupons" :key="index" >
			<view class="iconfont iconduihao" v-if="selectedCouponIndex==index"></view> <!--要想读到store里的东西有时候前面不能加this -->
			<view class="zhanwei" v-else></view>
			<view class="item" >
				<view class="quan"  >
					<view class="quanInfo">
						<text class="couponMpoey">
							￥{{coupon.mjqfd}}
							<text class="couponMpoeyInfo">满{{coupon.mjqqsje}}减{{coupon.mjqfd}}</text>
						</text>
						<text class="couponName">{{coupon.yhqms}}</text>
						<!-- <text class="couponTime">2019.8.1 00:00-2019.8.123:59</text> -->
					</view>
					<view class="receiveBtn">
						<view class="receive" @tap="select(index, coupon.mjqqsje, coupon.mjqfd, coupon)">使用</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="tianchong"></view>
		
	</view>
</template>

<script>
	import {myRequest} from '@/api/ajax.js'
	import {mapState,mapGetters} from 'vuex'
	export default {
		data() {
			return {
				myCoupons: [],
				// 选中的优惠券
				selectedCouponIndex: -1,
				// 总价
				total: -1
			};
		},
		onLoad(option) {
			console.log('option = ', option)
			this.total = option.money
			console.log('this.total = ', this.total)
		},
		computed:{
			...mapState(['userSite','current','userInformation']),
			...mapGetters(['show_userSite'])
		},
		
		mounted() {
			this.getCoupons();
		},
		
		methods: {
			
			// 获取已拥有的优惠券
			async getCoupons() {
				let result = await this.$request({
					url: '/newtest/shop-mjq/getyhqbyuserID/' + this.$store.state.userInformation.userID
				})
				
				this.myCoupons = result.data.res
				// console.log('已有优惠券result = ', this.myCoupons)
			},
			
			select(i, qiShiJinE, jianShaoMoney, coupon){
				console.log('select')
				if (this.total > qiShiJinE) {
					this.selectedCouponIndex = i;
					// 选中优惠券后，告诉购买页面要减少的金额
					const eventChannel = this.getOpenerEventChannel();
					eventChannel.emit('getCouponPrice', {data: jianShaoMoney, coupon});
				}
				else {
					uni.showToast({
						title: '满减起始金额大于或等于购物车总价',
						duration: 1500,
						icon: 'none'
					})
				}
			},
			
			
			
			
		}
	};
</script>

<style lang="scss" scoped>
	.tianchong{
		height: 120px;
	}
	.list-item{
		display: flex;
		align-items: center;
		padding-left: 15rpx;
		padding-right: 25rpx;
	}
	.iconduihao{
		color: #02a774;
		width: 32rpx;
	}
	.zhanwei{
		width: 32rpx;
	}
.item {
	padding: 40rpx 20rpx;
	border-bottom: 1rpx solid #ddd;
	flex: 1;
	.top {
		display: flex;
		font-weight: bold;
		font-size: 34rpx;
		.phone {
			margin-left: 60rpx;
		}
		.tag {
			display: flex;
			font-weight: normal;
			align-items: center;
			text {
				display: block;
				width: 60rpx;
				height: 34rpx;
				line-height: 34rpx;
				color: #ffffff;
				font-size: 20rpx;
				border-radius: 6rpx;
				text-align: center;
				margin-left: 30rpx;
				background-color:rgb(49, 145, 253);
			}
			.red{
				background-color:red
			}
		}
	}
	.bottom {
		display: flex;
		margin-top: 20rpx;
		font-size: 28rpx;
		justify-content: space-between;
		color: #999999;
	}
}
.addSite {
	display: flex;
	justify-content: space-around;
	width: 600rpx;
	line-height: 100rpx;
	position: fixed;
	bottom: 20rpx;
	left: 80rpx;
	background-color: #02a774;
	border-radius: 60rpx;
	font-size: 30rpx;
	.add{
		display: flex;
		align-items: center;
		color: #ffffff;
		.icon{
			margin-right: 10rpx;
		}
	}
}

.quan{
		margin: 22rpx 37rpx;
		background-color: #FFF5F6;
		border-radius: 10rpx;
		display: flex;
		font-family: PingFang SC;
	}
	.quanInfo{
		/* 两个窟窿是这块做出来的 */
		background-image: radial-gradient(circle at right top, #FFFFFF, #FFFFFF 15rpx, transparent 16rpx), radial-gradient(circle at right bottom, #FFFFFF, #FFFFFF 15rpx, transparent 16rpx);
		border-right: 1px dashed #F64F51;
		padding: 30rpx 50rpx;
		width: 75%;
	}
	.couponMpoey{
		font-size: 30rpx;
		font-weight: 700;
		color: #ff3600;
		display: block;
	}
	.couponMpoeyInfo{
		font-size: 26rpx;
		padding-left: 10rpx;
	}
	.couponName{
		font-size: 24rpx;
		font-weight: 500;
		color: #797979;
		display: block;
	}
	.couponTime{
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #797979;
	}
	.receiveBtn{
		background-image: radial-gradient(circle at left top, #FFFFFF, #FFFFFF 15rpx, transparent 16rpx), radial-gradient(circle at left bottom, #FFFFFF, #FFFFFF 15rpx, transparent 16rpx);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: -2rpx;
	}
	.receive{
		border-radius: 23rpx;
		background-color: #5FC484;
		padding: 7rpx 31rpx;
		text-align: center;
		margin-left: 36rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
	}
</style>
